<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <el-row>
      <el-col :span="4" align="left" style="line-height: 36px;height: 36px">
        <span style="font-size: 14px;color: #747778">开票信息</span>
      </el-col>
    </el-row>
    <el-row style="justify-content: center">
      <el-button @click="addNew()"
                 style="margin: 8px 0px 8px 0px;padding: 6.2px 7px;font-size: 13px;line-height: 18px"
                 v-show="editable &&canEdit && !showForm && tableData.length < 1" round>
        <i class="joys-icon-new" style="margin-right: 12px;margin-left: 4px"/>
        <span style="margin: 0px">添加开票信息</span>
      </el-button>
      <span v-if="tableData.length === 0 && !editable">没有数据</span>

    </el-row>

    <transition name="el-zoom-in-top">
      <el-form :model="formData"
               ref="formData"
               v-if="showForm"
               :class="{cardBackColor:!canEdit}"
               :rules="rules"
               style="text-align: left;padding-top: 28px" inline>
        <el-row style="padding:0px 12px 24px 12px">
          <el-col :md="8" :lg="6">
            <el-form-item label="纳税人主体名称" prop="taxpayerName">
              <ft-input :editable="!canEdit" v-model="formData.taxpayerName"></ft-input>
            </el-form-item>
          </el-col>

          <el-col :md="8" :lg="6">
            <el-form-item label="纳税人主体类型" prop="taxpayerType">
              <ft-enum-select v-model="formData.taxpayerType"
                              service-name="lss-customer"
                              type-name="taxpayerType"
                              placeholder="请选择纳税人主体类型"
                              size="small"
                              :editing="!canEdit">
              </ft-enum-select>
            </el-form-item>
          </el-col>

          <el-col :md="8" :lg="6">
            <el-form-item label="纳税人识别号" prop="taxpayerCode">
              <ft-input :editable="!canEdit" v-model="formData.taxpayerCode"></ft-input>
            </el-form-item>
          </el-col>

          <el-col :md="8" :lg="6">
            <el-form-item label="公司电话" prop="invoiceTel">
              <ft-input :editable="!canEdit" v-model="formData.invoiceTel" type="phonenum"></ft-input>
            </el-form-item>
          </el-col>

          <el-col :md="8" :lg="6">
            <el-form-item label="银行户名" prop="invoiceName">
              <ft-bank-account v-model="formData.invoiceName"
                                :sourceBillId="customerId"
                                :editable="!canEdit"
                                @change="validate"
                                @matchedOption="change"
                                @unmatchedOption="unChange">
                </ft-bank-account>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="银行账户" prop="invoiceBankAccount">
                <ft-input :editable="bankAccountEdit" v-model="formData.invoiceBankAccount"  :title="formData.invoiceBankAccount"></ft-input>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="开户银行" prop="invoiceBank">
                <ft-input :editable="bankAccountEdit" v-model="formData.invoiceBank"></ft-input>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="发票联系人" prop="invoiceLinkman">
                <ft-link-man :editable="!canEdit"
                             v-model="formData.invoiceLinkman"
                             :sourceBillId="customerId"
                             :linkmanId="linkmanId"
                             @change="validate"
                             @matchedOption="linkManChange"
                             @unmatchedOption="linkManUnChange"></ft-link-man>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="发票联系人电话" prop="invoiceLinkmanTel">
                <ft-input :editable="linkManEdit" v-model="formData.invoiceLinkmanTel" type="phonenum"></ft-input>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="发票邮寄地址" prop="invoiceSendAddress">
                <ft-input :editable="!canEdit" v-model="formData.invoiceSendAddress"></ft-input>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6">
              <el-form-item label="发票地址" prop="invoiceAddress">
                <ft-input :editable="!canEdit" v-model="formData.invoiceAddress"></ft-input>
              </el-form-item>
            </el-col>
          </el-row>

          <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>

          <el-row style="padding:16px 0px">
            <el-col align="right">
              <el-button size="mini"
                         @click="handleCancel(formData)"
                         v-show="!canEdit">取消
              </el-button>
              <el-button size="mini"
                         type="primary"
                         @click="handleSave(formData)"
                         style="margin-left: 24px;margin-right: 36px"
                         v-show="!canEdit">保存
              </el-button>
            </el-col>
            <el-col align="right" v-show="canEdit">
              <el-button size="mini"
                         style="margin-left: 24px;margin-right: 36px"
                         @click="handleCancel()">返回
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </transition>
    <transition name="el-zoom-in-top">
        <el-table :data="tableData"
                  v-if="tableData.length > 0 && !showForm"
                  tooltip-effect="light">
          <el-table-column label="纳税人主体名称" align="left" prop="taxpayerName" show-overflow-tooltip>
            <template slot-scope="scope">
              <ft-link-text @click="handleCard(scope.$index,scope.row)"
                            :text="scope.row.taxpayerName">
              </ft-link-text>
            </template>
          </el-table-column>
          <el-table-column label="纳税人主体类型" align="left" prop="taxpayerType" show-overflow-tooltip>
            <template slot-scope="scope">
              <ft-enum-select v-model="scope.row.taxpayerType"
                              service-name="lss-customer"
                              type-name="taxpayerType"
                              placeholder="请选择"
                              :editing="tableEnumEdit">
              </ft-enum-select>
            </template>
          </el-table-column>
          <el-table-column label="纳税人识别号" align="left" prop="taxpayerCode" show-overflow-tooltip></el-table-column>
          <el-table-column label="银行户名" align="left" prop="invoiceName" show-overflow-tooltip></el-table-column>
          <el-table-column label="银行账户" align="left" prop="invoiceBankAccount" show-overflow-tooltip></el-table-column>
          <el-table-column label="发票联系人" align="left" prop="invoiceLinkman" show-overflow-tooltip></el-table-column>
          <el-table-column label="发票联系人电话" align="left" prop="invoiceLinkmanTel" show-overflow-tooltip></el-table-column>
          <el-table-column label="发票地址" align="left" prop="invoiceAddress" show-overflow-tooltip></el-table-column>
          <el-table-column v-if="editable" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="handleEdit(scope.$index,tableData)">编辑
              </el-button>
              <el-popover title="确认" placement="top" width="200" v-model="scope.row.delVisible">
                <p>数据删除后，将不能恢复，确认删除？</p>
                <div style="text-align:right; margin:0">
                  <el-button size="small"
                             @click="scope.row.delVisible=false">取消
                  </el-button>
                  <el-button type="danger" size="small" @click="handleDelete(scope.$index, tableData)">确定</el-button>
                </div>
                <span slot="reference" style="margin-left:.10rem">
                    <el-button type="text" size="small" style="color:#B94A48">删除</el-button>
                  </span>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </transition>
    </div>
  </template>

  <script>
    import FtBankAccount from '../ft/FtBankAccount'
    import FtLinkMan from "../ft/FtLinkMan"

    export default {
      name: "CustInvoice",
      components: {FtBankAccount, FtLinkMan},
      props: {
        customerId: {
          type : String,
          default : '',
        },
        sourceBillType: {
          type : String,
          default : '',
        },
        customerName: {
          type : String,
          default : '',
        },
        invoiceAddress: {
          type : String,
          default : '',
        },
        identityNo: {
          type : String,
          default : '',
        },
        identityType: {
          type : String,
          default : '',
        },
        editable: {
          type : Boolean,
          default : true,
        },
      },
      mounted() {
        this.load()
      },
      data() {
        return {
          tableData: [],
          condition: '1',
          tableEnumEdit: false,
          invoiceAddressTemp: '',
          invoice: {},
          formData: {},
          bankAccountId: "",
          linkmanId: "",
          showForm:false,
          canEdit: true,
          bankAccountEdit: false,
          linkManEdit: false,
          rules: {
            taxpayerName: [
              {required: true, message: '纳税人主体名称不能为空', trigger: 'blur'},],
            taxpayerType: [{
              required: true, message: '纳税人主体类型不能为空', trigger: 'change'},],
            taxpayerCode: [{
              required: true, message: '纳税人识别号不能为空',trigger: 'blur'},
              {max: 50,message: '纳税人识别号长度不能超过50',trigger: 'blur'},],
            invoiceTel: [
              {required: true,message: '公司电话不能为空',trigger: 'blur'}],
            invoiceName: [
              {max: 30,message: '银行户名需在30字内',trigger: 'blur'}],
            invoiceBankAccount: [
              {max: 30,message: '银行账户需在30字内',trigger: 'blur'}],
            invoiceBank: [
              { max: 30,message: '开户银行需在30字内',trigger: 'blur'}],
            invoiceLinkman: [
              {max: 30,message: '发票联系人需在30字内', trigger: 'blur'}],
            invoiceLinkmanTel: [
              {max: 30,message: '发票联系人电话需在30字内',trigger: 'blur'}],
            invoiceSendAddress: [
              {max: 50,message: '发票邮寄地址需在50字内',trigger: 'blur'}],
            invoiceAddress: [
              {max: 50,message: '发票地址需在50字内',trigger: 'blur'}]
          },
        }

      },
      methods: {
        load() {
          this.tableData = [];
          this.$http.get('/joys-rest/lss-customer/invoice/' + this.customerId).then(
            resp => {
              if (resp.body.custInvoiceId != null) {
                this.tableData.push(resp.body)
              }
              this.showForm = false
            },
            resp => {
              this.$message.error(resp.body)
          })
        },
        //显示表体
        addNew() {
          this.$http.get('/joys-rest/lss-customer/custInfo/corp/' + this.customerId).then(
            resp => {
              if (resp.body.customerId != null) {
                this.invoiceAddressTemp = resp.body.registeredAddress
              }
              if (this.tableData.length == 0) {
                if (this.identityType=='20'){
                  this.formData = {
                    sourceBillId: this.customerId,
                    sourceBillType: this.sourceBillType,
                    taxpayerName: resp.body.customerName,
                    taxpayerType: "GENERAL",
                    invoiceAddress: this.invoiceAddressTemp,
                    taxpayerCode: this.identityNo
                  };
                }else{
                  this.formData = {
                    sourceBillId: this.customerId,
                    sourceBillType: this.sourceBillType,
                    taxpayerName: resp.body.customerName,
                    taxpayerType: "GENERAL",
                    invoiceAddress: this.invoiceAddressTemp
                  };
                }
                this.index = -1;
                this.canEdit = false;
                this.showForm = true
              }
            }, resp => {
              this.$message.error(resp.body)
            }
          )
        },
        //列表删除按钮
        handleDelete(index, row) {
          this.ciId = row[index].custInvoiceId;
          this.$http.delete('/joys-rest/lss-customer/invoice/' + this.ciId).then(
            resp => {
              row.splice(index, 1);
              this.$message.success('删除成功!');
            },
            resp => {
              this.$message.error(resp.body)
          })
        },
        //列表取消
        handleCancel() {
          this.showForm = false;
          this.canEdit = true;
          this.$refs.formData.resetFields()
        },
        //列表编辑按钮
        handleEdit(index, row) {
          this.index = index;
          this.formData = JSON.parse(JSON.stringify(row[index]));
          this.canEdit = false;
          this.showForm = true;
          if (this.formData.invoiceName == '' || this.formData.invoiceName == null) {
            this.bankAccountEdit = false
          } else {
            this.bankAccountEdit = true
          }
          if (this.formData.invoiceLinkman == '' || this.formData.invoiceLinkman == null) {
            this.linkManEdit = false
          } else {
            this.linkManEdit = true
          }
        },
        //保存
        handleSave(formData) {
          const _this = this;
          _this.$refs.formData.validate((valid) => {
            if (valid) {
              _this.invoice = formData;
              _this.$http.put('/joys-rest/lss-customer/invoice/', _this.invoice).then(
                resp => {
                  if (_this.index == -1) {
                    _this.tableData.push(resp.body)
                  } else {
                    _this.tableData.splice(_this.index, 1, resp.body)
                  }
                  _this.canEdit = true;
                  _this.showForm = false;
                  this.formData = {};
                  _this.$message.success('保存成功!')
                },
                resp => {
                  _this.$message.error(resp.body);
                  _this.canEdit = false
              })
            } else {
              return false
            }
          })
        },
        change(params) {
          if (params && params.accountCode && params.accountCode != '') {
            this.bankAccountEdit = false;
            this.$set(this.formData, 'invoiceName', params.accountName);
            this.$set(this.formData, 'invoiceBankAccount', params.accountCode);
            this.$set(this.formData, 'invoiceBank', params.accountBank)
          } else {
            this.bankAccountEdit = true
            this.$set(this.formData, 'invoiceName', params.accountName)
          }
        },
        validate(){
          if (this.$refs.formData!= null){
            this.$refs.formData.validateField('invoiceName')
            this.$refs.formData.validateField('invoiceLinkman')
          }
        },
        unChange(params) {
          if (params) {
            this.$set(this.formData, 'invoiceName', params.accountName);
          }
        },
        linkManChange(params) {
          if (params && params.linkmanId && params.linkmanId != '') {
            this.linkManEdit = false;
            this.$set(this.formData, 'invoiceLinkman', params.linkmanName);
            this.$set(this.formData, 'invoiceLinkmanTel', params.linkmanTel);
            this.linkmanId = params.linkmanId
          } else {
            this.linkManEdit = true;
            this.linkmanId = ''
          }
        },
        linkManUnChange(params) {
          if (params ) {
            this.$set(this.formData, 'invoiceLinkman', params.linkmanName);
            //this.linkmanId = params.linkmanId
          }
        },
        //列表卡片按钮
        handleCard(index, row) {
          debugger
          this.formData = row;
          this.canEdit = true;
          this.showForm = true
          this.bankAccountEdit = false
          this.linkManEdit = false
        },
        //字数较多时，超出部分用...显示
        convertInputValue(val) {
          if (null != val && '' != val && val.length > 9) {
            return val.substr(0, 9) + '...'
          }
          return val
        },
      },
      watch:{
        invoiceAddress: {
          handler(val){
            this.formData.invoiceAddress=val
          },
          immediate: true
        }
      }
    }
  </script>
  <style>
    .cardBackColor {
      background-color: #F4F8F9;
      margin-bottom: 4px;
    }

    .tableClass .cell {
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
  <style scoped>
  </style>
